<div class="row">
  <div class="col-xs-8 mb-4">
    <h2>Buy and sell TYRELL and CYBERDINE quotes to win a prize!</h2>
  </div>
  <div class="col-xs-4 text-right mb-4">
    <br/>
    <span class="big-text"><b>{{ money | number:'1.2-2' }}</b></span> <span class="med-text">&nbsp; $</span>
  </div>
</div>
<div class="row">
  <div class="col-xs-6">
    <pfng-card [config]="tyrChartCardConfig">
      <pfng-sparkline-chart [config]="tyrChartConfig" [chartData]="tyrChartData" ></pfng-sparkline-chart>
    </pfng-card>
  </div>
  <div class="col-xs-6">
    <pfng-card [config]="tyrQuoteCardConfig" [headerTemplate]="tyrQuotesTemplate">
      <ng-template #tyrQuotesTemplate>
        <h2 class="card-pf-title">TYRELL Portfolio
          <span class="badge font-weight-bolder" style="font-size: 1.2em">{{ portfolioQuotes('TYR') }}</span>
        </h2>
      </ng-template>
      <div class="row">
        <div class="col-xs-12">
          Buy:
          <button type="button" class="btn btn-primary bt-lg m-2" (click)="buy('TYR', 1)" [disabled]="!canBuy('TYR', 1)">1</button>
          <button type="button" class="btn btn-primary bt-lg m-2" (click)="buy('TYR', 5)" [disabled]="!canBuy('TYR', 5)">5</button>
          <button type="button" class="btn btn-primary bt-lg m-2" (click)="buy('TYR', 10)" [disabled]="!canBuy('TYR', 10)">10</button>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          Sell:
          <button type="button" class="btn btn-warning bt-lg m-2" (click)="sell('TYR', 1)" [disabled]="!canSell('TYR', 1)">1</button>
          <button type="button" class="btn btn-warning bt-lg m-2" (click)="sell('TYR', 5)" [disabled]="!canSell('TYR', 5)">5</button>
          <button type="button" class="btn btn-warning bt-lg m-2" (click)="sell('TYR', 10)" [disabled]="!canSell('TYR', 10)">10</button>
        </div>
      </div>
      <br/>
      Last Buy at: {{ getLastBuy('TYR') }}<br/>
      Last Sell at: {{ getLastSell('TYR') }}<br/>
    </pfng-card>
  </div>
</div>
<div class="row">
  <div class="col-xs-6">
    <pfng-card [config]="cybChartCardConfig">
      <pfng-sparkline-chart [config]="cybChartConfig" [chartData]="cybChartData" ></pfng-sparkline-chart>
    </pfng-card>
  </div>
  <div class="col-xs-6">
    <pfng-card [config]="cybQuoteCardConfig" [headerTemplate]="cybQuotesTemplate">
      <ng-template #cybQuotesTemplate>
        <h2 class="card-pf-title">CYBERDINE Portfolio
          <span class="badge font-weight-bolder" style="font-size: 1.2em">{{ portfolioQuotes('CYB') }}</span>
        </h2>
      </ng-template>
      <div class="row">
        <div class="col-xs-12">
          Buy:
          <button type="button" class="btn btn-primary bt-lg m-2" (click)="buy('CYB', 1)" [disabled]="!canBuy('CYB', 1)">1</button>
          <button type="button" class="btn btn-primary bt-lg m-2" (click)="buy('CYB', 5)" [disabled]="!canBuy('CYB', 5)">5</button>
          <button type="button" class="btn btn-primary bt-lg m-2" (click)="buy('CYB', 10)" [disabled]="!canBuy('CYB', 10)">10</button>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          Sell:
          <button type="button" class="btn btn-warning bt-lg m-2" (click)="sell('CYB', 1)" [disabled]="!canSell('CYB', 1)">1</button>
          <button type="button" class="btn btn-warning bt-lg m-2" (click)="sell('CYB', 5)" [disabled]="!canSell('CYB', 5)">5</button>
          <button type="button" class="btn btn-warning bt-lg m-2" (click)="sell('CYB', 10)" [disabled]="!canSell('CYB', 10)">10</button>
        </div>
      </div>
      <br/>
      Last Buy at: {{ getLastBuy('CYB') }}<br/>
      Last Sell at: {{ getLastSell('CYB') }}<br/>
    </pfng-card>
  </div>
</div>
